<template>
        <div class="sider-two">
            <ul class="sider-two-ul">
            <router-link 
            class="sider-two-ul-li"
            tag="li"
             v-for="item of list" 
                 :key="item.id"
                :to="/home/+ item.path"
                @click.native="musicPlay"
                 >
                 <span class="icon"><img class="icon-img" :src="item.icon" /></span>
                 <span class="text">{{item.title}}</span>
                 </router-link>
            
          </ul> 
            <div class="sider-lan"></div>
          <router-view />
        </div>
         
</template>

<script>
export default {
    name:'home',
    data(){
        return{
            list:[{
                icon:require('@/assets/icon/1.png'),
                title:'人力资源',
                path:'renli'
            },{
                 icon:require('@/assets/icon/2.png'),
                title:'采购系统',
                path:'caigou'
            },{
                icon:require('@/assets/icon/4.png'),
                title:'库存系统',
                path:'kuchun'
            },{
                icon:require('@/assets/icon/5.png'),
                title:'生产管理',
                path:'shengcan'
            },{
                 icon:require('@/assets/icon/6.png'),
                title:'销售系统',
                path:'xiaoshou'
            },{
                icon:require('@/assets/icon/7.png'),
                title:'外贸管理',
                path:'waimao'
            },{
                 icon:require('@/assets/icon/8.png'),
                title:'财务管理',
                path:'caiwu'
            },{
                icon:require('@/assets/icon/9.png'),
                title:'资金管理',
                path:'zhijin'
            },{
                icon:require('@/assets/icon/10.png'),
                title:'售后服务',
                path:'shouhou'
            },{
                 icon:require('@/assets/icon/11.png'),
                title:'智能系统',
                path:'zhineng'
            },{
                 icon:require('@/assets/icon/12.png'),
                title:'数据分析',
                path:'shuju'
            }]
        }
    },
    created(){
       
    },
    methods:{
        musicPlay(){
            // this.musicStart = new Audio ("static/Tock.wav");//打包后使用绝对路径
            this.musicStart = new Audio ("../../static/Tock.wav");
            this.musicStart.play();
        }
    },
   
}
</script>

<style lang="scss" scoped>
    .router-link-exact-active .router-link-active{
        color: red;
    }
	.sider-two{
        display: flex;
        width: 100%;
        &-ul{
            width:11%;
            border: 1px solid black;
            margin-right: 16px;
            background-color: #363439;
            display: flex;
            flex-direction: column;
            

            &-li{
            height: 9.4%;
            border: 1px solid #312d2c;
            display: flex;
            transition: all 2.1s;    
            align-items: center;
            justify-content: center;
               
                 
                &:last-child{
                    border: none;
                    padding-bottom: 105px;
                   
                    .text{
                        position: absolute;
                        margin-top:52px;
                         margin-left:4px;
                         
                    }
                    .icon{
                        position: absolute;
                        margin-top:34px;
                        margin-left: 20px;
                     }
                 }
            }
             &-li:hover{
                 background: #52514f;
             }
            
 &-li:hover .icon{
     transform: rotate(360deg);
 }

 @media screen and (max-width:1181px){
.text{font-size: 13px !important;}
}
     .text{
            color: #dededc;
            margin-left: 19px;
            cursor: pointer;
          }
        }
    }
    .icon{
           transition: all 1s;  
          
        &-img{
           padding-left: 0px;
           margin-top: 4px;
           margin-left: 0px;
        }
    }
    .sider-lan{
        margin-left: -16px; 
        margin-right: 15px;
        width: 7px;
        background-color:#dcdedd;
    }
</style>


